<template>
    <div class="card-box" style="margin-top: 60px;">
        <el-row>
            <el-col :md="10" :offset="7">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item
                        label="运营商名称："
                    >
                        <el-input v-model="ruleForm.name" auto-complete="off" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item
                        label="接口种类："
                        prop="api_type"
                    >
                        <el-select v-model="ruleForm.api_type" filterable placeholder="请选择" class="select">
                            <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item
                        label="提供报竣："
                    >
                        <el-radio-group v-model="ruleForm.type1">
                            <el-radio :label="1">是</el-radio>
                            <el-radio :label="2">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item
                        label="记录历史："
                    >
                        <el-radio-group v-model="ruleForm.type1">
                            <el-radio :label="1">是</el-radio>
                            <el-radio :label="2">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item
                        label="说明："
                    >
                        <el-input type="textarea" :rows="6" placeholder="请输入内容" v-model="ruleForm.textarea"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                        <el-button @click="resetForm('ruleForm')">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </div>

</template>
<script>
    export default {
    data() {
      return {
        options: [{
          value: '选项1',
          label: '操作'
        }, {
          value: '选项2',
          label: '查询'
        }],
        ruleForm: {
            name: '单卡停机复机',
          api_type: '',
          type1: 1,
          type2: 1,
          textarea: ''
        },
        rules: {
          api_type: [
            { required: true, message: '请选择接口种类', trigger: 'change' }
          ]
        }
      };
    },
    created() {
        this.getData()
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if (this.$route.fullPath == '/carriers/new') {
                        this.$axios.post('/api/carriers',
                            {
                                name: this.ruleForm.name,
                                contact_person: this.ruleForm.contact_person,
                                email: this.ruleForm.email,
                                phone_number: this.ruleForm.phone_number,
                                carrier_type: this.ruleForm.carrier_type
                            }
                        ).then((res) => {
                            this.$store.commit('setAlert', res.data)
                            this.$router.push({
                                path: '/carriers'
                            })
                        })
                    } else {
                        this.$axios.put(
                            `/api/carriers/${this.$route.query.id}`,
                             {
                                name: this.ruleForm.name,
                                contact_person: this.ruleForm.contact_person,
                                email: this.ruleForm.email,
                                phone_number: this.ruleForm.phone_number,
                                carrier_type: this.ruleForm.carrier_type
                            }
                        ).then((res) => {
                            this.$store.commit('setAlert', res.data)
                            this.$router.push({
                                    path: '/carriers'
                            })
                        })
                    }
                    
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.$router.push({
                path: '/carriers'
            })
        },
        getData() {
            this.$axios.get(`/api/carriers/${this.$route.query.id}/edit`).then((res) => {
                this.ruleForm.name = res.data.name
                this.ruleForm.carrier_type = res.data.carrier_type
                this.ruleForm.contact_person = res.data.contact_person
                this.ruleForm.email = res.data.email
                this.ruleForm.phone_number = res.data.phone_number
            })
        }
    }
}
</script>
<style lang="scss" scoped>
    .select {
        width: 100%;
    }
</style>

